<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .my-style {
      background-color: #606060;
      padding-left: 20% !important;
    }

    .my-style .first {
      color: white;
      font-size: 16px;
    }

    .my-style a {
      font-size: 12px;
      color: #bdbebd;
      line-height: 30px;
    }

    .my-style a:hover {
      color: white;
    }

    .carousel-item {
      max-height: 500px;
    }
  </style>

  <link rel="stylesheet" href="./bootstrap-4.5.3-dist/css/bootstrap.css">
  <script src="./bootstrap-4.5.3-dist/js/jquery-3.6.0.min.js"></script>
  <script src="./bootstrap-4.5.3-dist/js/bootstrap.js"></script>
</head>

<body>
  <!-- 导航栏 -->
  <ul class="nav my-style">

    <li class="nav-item">
      <a class="nav-link first active" href="#">现代浏览器博物馆</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link" data-toggle="modal" data-target="#exampleModalCenter" href="#">综述</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="modal" data-target="#exampleModalCenter" href="#">简述</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="modal" data-target="#exampleModalCenter" href="#">特点</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="modal" data-target="#exampleModalCenter1" href="#">关于</a>
    </li>

  </ul>


  <!-- 弹框 -->
  <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalCenterTitle">Chrome</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
        </div>
      </div>
    </div>
  </div>


  <!-- 轮播图 -->
  <div class="bd-example">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
      <!-- 分页器 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
      </ol>
      <!-- 轮播图片 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="images/chrome-big.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption">
            <h5>Chrome</h5>
            <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
            <a class="btn btn-primary" href="https://www.iconfont.cn/" role="button">点我下载</a>
          </div>
        </div>
        <div class="carousel-item">
          <img src="images/firefox-big.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption">
            <h5>Firefox</h5>
            <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。
            </p>
            <a class="btn btn-primary" href="https://www.iconfont.cn/" role="button">点我下载</a>
          </div>
        </div>
        <div class="carousel-item">
          <img src="images/ie-big.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption">
            <h5>Safari</h5>
            <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
            <a class="btn btn-primary" href="https://www.iconfont.cn/" role="button">点我下载</a>
          </div>
        </div>
        <div class="carousel-item">
          <img src="images/opera-big.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption">
            <h5>Opera</h5>
            <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
            <a class="btn btn-primary" href="https://www.iconfont.cn/" role="button">点我下载</a>
          </div>
        </div>
        <div class="carousel-item">
          <img src="images/safari-big.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption">
            <h5>IE</h5>
            <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
            <a class="btn btn-primary" href="https://www.iconfont.cn/" role="button">点我下载</a>
          </div>
        </div>
      </div>
      <!-- 左右按钮 -->
      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

  <!-- 栅格系统 样式 -->
  <style>
    .slidee {
      width: 60%;
      margin: 20px auto;
    }

    .line {
      padding-bottom: 50px;
      border-bottom: 1px solid #d3d1d1;
      margin: 50px auto;
    }

    .row>.col-md-4 {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .row>.col-md-4 button {
      border-radius: 5px;
      background-color: transparent;
      outline: none;
    }

    .row>.col-md-4>p {
      height: 80px;
    }
  </style>
  <div class="container slidee">
    <!--栅格系统  -->
    <div class="row line">
      <div class="col-md-4 text-center">
        <img src="./images/chrome-logo-small.jpg" alt="">
        <h2>Chrome</h2>
        <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
        <button>点我下载</button>
      </div>
      <div class="col-md-4 text-center">
        <img src="./images/firefox-logo-small.jpg" alt="">
        <h2>Firefox</h2>
        <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
        <button>点我下载</button>

      </div>
      <div class="col-md-4 text-center">
        <img src="./images/safari-logo-small.jpg" alt="">
        <h2>Safari</h2>
        <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
        <button class="xia">点我下载</button>

      </div>

    </div>

    <!-- 滑动门 -->
    <style>
      nav {
        background-color: white;
      }

      .display-4 {
        color: #007bff;

      }

      .tab-content .float-left {
        margin-top: 100px;
        width: 60%;
        line-height: 25px;
      }

      .tab-content .float-left p {
        margin-top: 5px;
      }

      .di {
        clear: both;
        /* border-top: 1px solid rgb(197, 196, 196); */
        padding: 30px 0;

      }
    </style>
    <div class="hua border-bottom">
      <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
            aria-controls="nav-home" aria-selected="true">Chrome</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile1" role="tab"
            aria-controls="nav-profile1" aria-selected="false">Firefox</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile2" role="tab"
            aria-controls="nav-profile2" aria-selected="false">Safari</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile3" role="tab"
            aria-controls="nav-profile3" aria-selected="false">Opera</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile4" role="tab"
            aria-controls="nav-profile4" aria-selected="false">IE</a>
        </div>
      </nav>
      <div class="tab-content" id="nav-tabContent">
        <!--谷歌 -->
        <div class="tab-pane fade show row active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
          <div class="row align-items-center">
            <!-- 给文本部分设置你占7份 -->
            <div class="col-md-7 text-md-left">
              <span class="display-4">Google Chrome</span>
              <span class="lead"><strong> 使用最广</strong></span>
              <p class="d-none d-xl-block">
                Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
                该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
            </div>
            <!-- 给图片部分设置占5份 -->
          <div class="col-md-5 text-center">
          <img class="w-100" src="./images/chrome-logo.jpg" alt="">
        </div>
        </div>
        </div>
        <!-- 火狐 -->
        <div class="tab-pane fade" id="nav-profile1" role="tabpanel" aria-labelledby="nav-profile-tab">
          <div class="row align-items-center">
            <!-- 给文本部分设置你占7份 -->
            <div class="col-md-7 text-md-left">
            <span class="display-4">Mozilla Firefox</span>
            <span class="lead"><strong> 美丽的狐狸</strong></span>
            <p class="d-none d-xl-block"> Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
              使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
          </div>
    <!-- 给图片部分设置占5份 -->
    <div class="col-md-5 text-center">
          <img width="350" src="./images/firefox-logo.jpg" alt="">  
        </div>
      </div>
    </div>
        <!-- safari -->
        <div class="tab-pane fade" id="nav-profile2" rol e="tabpanel" aria-labelledby="nav-profile-tab">
          <div class="row align-items-center">
            <!-- 给文本部分设置你占7份 -->
            <div class="col-md-7 text-md-left">
            <span class="display-4"> Safari</span>
            <span class="lead"><strong>Mac用户首选</strong></span>
            <p class="d-none d-xl-block">
              Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。 Safari在2003年1月7日首度发行测试版，并成为Mac OS X
              v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>
          </div>
          <div class="col-md-5 text-center">
          <img width="350" src="./images/safari-logo.jpg" alt="">
        
        </div>
      </div>
    </div>
        <!-- opera -->
        <div class="tab-pane fade" id="nav-profile3" role="tabpanel" aria-labelledby="nav-profile-tab">

          <div class="row align-items-center">
            <!-- 给文本部分设置你占7份 -->
            <div class="col-md-7 text-md-left">
            <span class="display-4"> Opera</span>
            <span class="lead"><strong>小众但易用</strong></span>
            <p class="d-none d-xl-block">
              Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。</p>
          </div>
          <div class="col-md-5 text-center">
          <img width="350" src="./images/opera-logo.jpg" alt="">
         
        </div>
      </div>
        </div>
        <!-- IE -->
        <div class="tab-pane fade" id="nav-profile4" role="tabpanel" aria-labelledby="nav-profile-tab">

          <div class="row align-items-center">
            <!-- 给文本部分设置你占7份 -->
            <div class="col-md-7 text-md-left">
            <span class="display-4"> IE</span>
            <span class="lead"><strong>你懂的</strong></span>
            <p class="d-none d-xl-block"> Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet
              Explorer(7，8，9，10版本)，
              简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
          </div>
          <div class="col-md-5 text-center">
          <img width="350" src="./images/ie-logo.jpg" alt="">
          </div>
          </div>


        </div>

      </div>
    </div>

    <div class="di">
      <span class="float-left">@2021 H5</span>
      <a class="float-right" href="#carouselExampleCaptions">回到顶部</a>
    </div>

  </div>



  </div>


 


</body>

</html>